<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安装网站 - Bibi Setup </title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/global.css" />
    <script src="assets/jquery-3.7.1.min.js" ></script>
    <script src="assets/form.js" ></script>
</head>
<body>
    <div class="main-container">
        <div class="main-box">
            <div class="header">
                <div class="logo">
                    <img src="assets/image/logo.svg"  style="width: 28px; height: 28px;" /> 安装网站
                </div>
                <div id="loading">
                    <div class="spinner-border">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="content-box">
                    <div class="app-box">
                        
                    </div>
                
                    <form>
                        
                    </form>
                </div>
                <div class="btn-box">
                    <button class="btn btn-primary" disabled style="width: 80%;" id="main" onclick="save()">安装</button>
                    <button class="btn btn-secondary" style="width: 20%;" id="next" onclick="next()">跳过</button>      
                </div>
           </div>      
        </div>
    </div>

    <script>
    function check(){
        $.ajax({
            url:'work/check-app.php',
            dataType:"json",
            type:'post',
            data:{
                app:'web'
            },
            success:function(re){

                if (re.status == 'error'){
                    alert(re.message);
                    return;
                }

                $('#main').attr('disabled',false);


                $('.app-box').html(appHtml(re.data));

                let databaseOption = [];
                for(let name  in re.data.database){
                    databaseOption.push({
                        label:re.data.database[name],
                        value:name
                    });
                }

                $('form').append(row('数据库',select('database',databaseOption,'default','请选择要安装到的数据库')));
                $('#loading').hide();
            }
        });
    }

    function next(){
        location.href = 'over.html';
    }

    function  save(){
        $('#loading').show();
        $.ajax({
            url:'work/save-web.php',
            dataType:"json",
            type:'post',
            data:{
            
                database:$('#database').val()
            },
            success:function(re){
                if (re.status == 'error'){
                    alert(re.message);
                    return;
                }
                alert('安装成功');
                location.href = 'open.html';
            },
            error:function(){
                alert('安装失败');
            },
            complete:function(){
                $('#loading').hide();
            }
        })
    }

    $(function(){
        check();
    });

    </script>
</body>

<style>
.item{
    display: flex;
    align-items: center;
}

.item .dot{
    width: 30px;
    display: flex;
    align-items: center;
}
</style>
</html>